<mat-progress-bar mode="indeterminate" *ngIf="loading"></mat-progress-bar>
<mat-toolbar color="primary" fxLayout="row" fxLayoutAlign="space-between center">
  <div>
      <div fxShow="true" fxHide.gt-sm="true" class="menu-buttons">
          <button mat-icon-button  (click)="sidenav.toggle()">
            <mat-icon>menu</mat-icon>
          </button>
      </div>
      <span>
        <img src="assets/img/logo.png" class="angular-logo">
      </span>

      <div fxShow="true" fxHide.lt-md="true" class="menu-buttons">
        <button mat-button routerLink="/project" routerLinkActive="is-active" appHelpElement="Project">Projects</button>
        <button mat-button routerLink="/service" routerLinkActive="is-active" appHelpElement="ExternalService">External Services</button>
        <button mat-button routerLink="/engine" routerLinkActive="is-active" *appHasAccess="authorizePolicyEnum.UserRoleAdminAccess" appHelpElement="Engine">Engines</button>
        <button mat-button routerLink="/provider" routerLinkActive="is-active" *appHasAccess="authorizePolicyEnum.UserRoleAdminAccess" appHelpElement="TaskProvider">Task Providers</button>
        <button mat-button routerLink="/user" routerLinkActive="is-active" *appHasAccess="authorizePolicyEnum.UserRoleAdminAccess" appHelpElement="User">Users</button>
      </div>
  </div>
  <div class="profile-buttons">
      <button mat-button class="greetings-button" (click)="onHelpClick()"><mat-icon>help_outline</mat-icon></button>

      <button mat-button class="greetings-button" [matMenuTriggerFor]="quickAddMenu" *ngIf="isQuickAddMenuShown()">
        <mat-icon>add</mat-icon>
        <mat-icon>arrow_drop_down</mat-icon>
      </button>

      <mat-menu #quickAddMenu="matMenu">
          <button mat-menu-item routerLink="/project/new" *appHasAccess="authorizePolicyEnum.UserRoleBasicAccess">New Project</button>
          <button mat-menu-item routerLink="/engine" [queryParams]="{newEngine:true}" *appHasAccess="authorizePolicyEnum.UserRoleAdminAccess">New Engine</button>
          <button mat-menu-item routerLink="/user" [queryParams]="{newUser:true}"  *appHasAccess="authorizePolicyEnum.UserRoleAdminAccess">New User</button>
          <button mat-menu-item routerLink="/provider" [queryParams]="{newProvider:true}" *appHasAccess="authorizePolicyEnum.UserRoleAdminAccess">New Task Provider</button>
      </mat-menu>

      <button class="greetings-button" mat-button [matMenuTriggerFor]="menu">
        <mat-icon *ngIf="!avatarImage" class="greetings-avatar-icon">person</mat-icon>
        <img [src]="avatarImage" *ngIf="avatarImage" class="greetings-avatar" />
        <mat-icon>arrow_drop_down</mat-icon>
      </button>

      <mat-menu #menu="matMenu">
          <button mat-menu-item>Signed in as <b>{{greetingsName}}</b></button>
          <mat-divider></mat-divider>
          <button mat-menu-item routerLink="/user-profile">Your Profile</button>
          <button mat-menu-item routerLink="/setting">Settings</button>
          <a mat-menu-item href="https://docs.opencatapult.net" target="_blank">Help & Documentation</a>
          <button mat-menu-item (click)="onLogout()">Sign out</button>
      </mat-menu>
  </div>
</mat-toolbar>
